<template>
  <div class="orderList-outer">
    <div class="box-hd">
      <h1 class="title">我的订单</h1>
      <div class="more clearfix">
        <ul
          class="filter-list"
          @click="clickChange">
          <li
            class="first"
            :class="{ active: type === 1 }">
            <a
              data-type="1"
              href="javascript:;">
              全部有效订单
            </a>
          </li>
          <li :class="{ active: type === 2 }">
            <a
              data-type="2"
              href="javascript:;">
              待支付
            </a>
          </li>
          <li :class="{ active: type === 3 }">
            <a
              data-type="3"
              href="javascript:;">
              待收货
            </a>
          </li>
          <li :class="{ active: type === 4 }">
            <a
              data-type="4"
              href="javascript:;">
              订单回收站
            </a>
          </li>
        </ul>
        <div class="search-form clearfix">
          <input
            type="search"
            name="keywords"
            autocomplete="off"
            placeholder="输入商品名称、订单号"
            class="search-text" />
          <button class="search-btn"><i class="fa fa-search"></i></button>
        </div>
      </div>
    </div>
    <div class="box-bd">
      <div>
        <ul class="order-list">
          <p class="empty">当前没有交易订单。</p>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const type = ref<number>(Number(route.query.type) || 1)
const clickChange = (e: MouseEvent) => {
  if ((e.target as HTMLElement).nodeName.toLocaleLowerCase() === 'a') {
    type.value = Number((e.target as HTMLElement).dataset.type)
  }
}
</script>

<style lang="less" scoped>
.active {
  a {
    color: #ff6700 !important;
  }
}
.orderList-outer {
  .box-hd {
    .title {
      margin: 0;
      font-size: 30px;
      font-weight: 400;
      line-height: 68px;
      color: #757575;
    }
    .more {
      .filter-list {
        float: left;
        margin: 0;
        padding: 18px 0;
        list-style-type: none;
        font-size: 16px;
        line-height: 1.25;
        li {
          float: left;
          padding: 0 20px;
          border-left: 1px solid #e0e0e0;
          color: #757575;
        }
        .first {
          padding-left: 0;
          border-left: 0;
        }
      }
      .search-form {
        float: right;
        position: relative;
        width: 262px;
        height: 40px;
        margin-top: 8px;

        .search-text {
          position: absolute;
          top: 0;
          border: 1px solid #e0e0e0;
          outline: 0;
          transition: all 0.2s;
          right: 41px;
          z-index: 1;
          width: 189px;
          height: 42px;
          padding: 0 15px;
          font-size: 12px;
          line-height: 42px;
          color: #757575;
        }
        .search-btn {
          right: 0;
          z-index: 2;
          width: 42px;
          height: 42px;
          font-size: 24px;
          line-height: 24px;
          background: #fff;
          color: #616161;
          position: absolute;
          top: 0;
          border: 1px solid #e0e0e0;
          outline: 0;
          transition: all 0.2s;
        }
      }
    }
  }
  .box-bd {
    .order-list {
      padding: 10px 0;
      .empty {
        margin: 40px 0;
        font-size: 18px;
        text-align: center;
        color: #b0b0b0;
      }
    }
  }
}
</style>
